import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { RegisterTransferService } from './register-transfer.service';
import {HttpClient} from '@angular/common/http';
import {AppUrl} from '../../../app.url';

@Component({
    selector: 'app-step1',
    template: `
    <form nz-form [formGroup]="form" (ngSubmit)="_submitForm()">
       
        <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="4">
                <label for="mobile" nz-form-item-required>手机号</label>
            </div>
            <div nz-form-control nz-col [nzSm]="20" nzHasFeedback [nzValidateStatus]="mobile">
                <nz-input formControlName="mobile" nzSize="large" [nzId]="'mobile'"></nz-input>
                <ng-container *ngIf="mobile.dirty || mobile.touched">
                    <p nz-form-explain *ngIf="mobile.errors?.required">请输入手机号</p>
                </ng-container>
            </div>
        </div>
        <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="4">
                <label for="captcha" nz-form-item-required>验证码</label>
            </div>
            <div nz-form-control nz-col [nzSm]="20" nzHasFeedback [nzValidateStatus]="captcha">
                <button nz-button (click)="getCaptcha()" style="margin-right: 3px;width: 35%;" [disabled]="count" [nzSize]="'large'">{{ count ? count + 's' : '获取验证码' }}</button>
                <nz-input formControlName="captcha" nzSize="large" [nzId]="'captcha'" style="width: 63%;">
                </nz-input>
                <ng-container *ngIf="captcha.dirty || captcha.touched">
                    <p nz-form-explain *ngIf="captcha.errors?.required">请输入验证码</p>
                </ng-container>
            </div>
           
        </div>
        <div nz-form-item nz-row>
            <div nz-form-control nz-col [nzSpan]="20" [nzOffset]="4">
                <button nz-button [nzType]="'primary'" nzSize="large" [nzLoading]="loading" [disabled]="form.invalid">下一步</button>
                <a class="login" routerLink="/passport/login" style="margin-left: 6px;color:dimgray;font-size: 1.2vh">使用已有账户登录</a>
            </div>
        </div>
    </form>
    <div class="alert" id="alert" style=" display: none; sition: absolute; top: 10%; z-index: 1000;">
        <nz-alert [nzType]="'error'" [nzMessage]="'Error'" [nzCloseable]="'false'"
                  [nzDescription]="'验证码错误.'" [nzShowIcon]="'true'"></nz-alert>
    </div>
    <div class="alert" id="salert" style=" display: none; sition: absolute; top: 10%; z-index: 1000;">
        <nz-alert [nzType]="'error'" [nzMessage]="'Error'" [nzCloseable]="'false'"
                  [nzDescription]="'服务错误.'" [nzShowIcon]="'true'"></nz-alert>
    </div>
    `
})
export class RegisterStep1Component implements OnInit {
    form: FormGroup;
    loading = false;
    constructor(private fb: FormBuilder, public item: RegisterTransferService, private http: HttpClient) {}

    ngOnInit() {
        this.form = this.fb.group({
            mobile: [null, [Validators.required, Validators.pattern(/^1\d{10}$/)]],
            captcha: [null, [Validators.required]]
        });
        this.form.patchValue(this.item);
    }

    //#region get form fields

    get mobile() { return this.form.controls['mobile']; }
    get captcha() { return this.form.controls['captcha']; }
    //#endregion

    count = 0;
    interval$: any;

    getCaptcha() {
        this.count = 59;
        this.interval$ = setInterval(() => {
            this.count -= 1;
            if (this.count <= 0)
                clearInterval(this.interval$);
        }, 1000);
        this.http.post(AppUrl.sign.getCaptchaUrl, {mobile:  this.mobile.value})
            .subscribe(data => {
                let temp: any;
                temp = data;
                if (temp.code) {}
            });
    }

    _submitForm() {
        this.loading = true;
        this.http.post(AppUrl.sign.checkCodeUrl, {phoneNum:  this.mobile.value, code: this.captcha.value})
            .subscribe(data => {
                this.loading = false;
                let temp: any;
                temp = data;
                if (temp.code === 200) {
                    this.item = Object.assign(this.item, this.form.value);
                    ++this.item.step;
                } else if (temp.code === 400) {
                    // 验证码错误
                    document.getElementById('alert').style.display = 'block';
                    setTimeout(() => {
                        document.getElementById('alert').style.display = 'none';
                    }, 3000);
                } else if (temp.status) {
                    // 服务错误
                    document.getElementById('salert').style.display = 'block';
                    setTimeout(() => {
                        document.getElementById('salert').style.display = 'none';
                    }, 3000);
                }
            });
    }
}
